import type { HistoricalEvent } from "@/types"

interface EventCardProps {
  event: HistoricalEvent
  isAnchor?: boolean
  onClick?: () => void
  isSelected?: boolean
  isCorrect?: boolean
  showDate?: boolean
}

export default function EventCard({
  event,
  isAnchor = false,
  onClick,
  isSelected = false,
  isCorrect = false,
  showDate = false,
}: EventCardProps) {
  const getCardClasses = () => {
    const baseClasses = "cursor-pointer rounded-lg p-4 transition-all duration-300 backdrop-blur-sm"
    if (isAnchor) return `${baseClasses} bg-blue-500 bg-opacity-30`
    if (isSelected && isCorrect) return `${baseClasses} bg-green-500 bg-opacity-30 scale-105`
    if (isSelected && !isCorrect) return `${baseClasses} bg-red-500 bg-opacity-30 scale-105`
    if (isCorrect) return `${baseClasses} bg-yellow-500 bg-opacity-30`
    return `${baseClasses} bg-white bg-opacity-20 hover:bg-opacity-25`
  }

  const formatDate = (dateString: string) => {
    // 处理带负号的日期字符串
    const isBC = dateString.startsWith('-')
    // 如果是公元前，去掉开头的负号再处理
    const cleanDateString = isBC ? dateString.substring(1) : dateString
    const [year, month, day] = cleanDateString.split("-").map(Number)
    
    // 检查是否为有效日期
    if (isNaN(year) || isNaN(month) || isNaN(day)) {
      return "未知日期"
    }
    
    // 月份名称数组
    const monthNames = [
      "一月", "二月", "三月", "四月", "五月", "六月",
      "七月", "八月", "九月", "十月", "十一月", "十二月"
    ]
    
    // 根据是否公元前返回相应格式
    if (isBC) {
      return `公元前${year}年 ${monthNames[month - 1]} ${day}日`
    } else {
      return `公元${year}年 ${monthNames[month - 1]} ${day}日`
    }
  }

  // 添加序数后缀 (1st, 2nd, 3rd, 4th...)
  const addOrdinalSuffix = (day: number) => {
    if (day > 3 && day < 21) return `${day}th`
    switch (day % 10) {
      case 1: return `${day}st`
      case 2: return `${day}nd`
      case 3: return `${day}rd`
      default: return `${day}th`
    }
  }

  return (
    <div className={getCardClasses()} onClick={onClick}>
      <h3 className="text-lg font-semibold mb-2 text-white">{event.name}</h3>
      {(showDate || isAnchor) && <p className="text-sm text-white opacity-80">{formatDate(event.date)}</p>}
    </div>
  )
}

